import dayjs from "dayjs";
import generateConfig from "./generateConfig";
import { prefixCls } from "../constant";
import Picker, { PickerPanel } from "rc-picker";
import localeCN from "rc-picker/es/locale/zh_CN";
import localeUS from "rc-picker/es/locale/en_US";
import React, { useState } from "react";
import classnames from "classnames";
import TimeInput from "./TimeInput";
import { dateFormat } from "../utils";
import { DateType, DayType } from "../type";

interface TimePickerProps {
  value: DateType;
  onChange: (value: DateType) => void;
  placeholder?: string;
  isChinese?: boolean;
}

interface DataPickerProps {
  selectedDate: [DateType, DateType];
  pickerValue: DayType;
  onChange: (value: DateType) => void;
  isChinese?: boolean;
}

const TimePicker = ({
  value,
  onChange,
  placeholder,
  isChinese = true,
}: TimePickerProps) => {
  const sharedProps = {
    generateConfig,
    prefixCls,
    getPopupContainer: (trigger: any) => trigger.parentNode,
    showNow: false,
    readOnly: true,
  };
  const [open, setOpen] = useState<boolean>(false);
  const handleChange = (v: DateType) => {
    setOpen(false);
    onChange(v);
  };
  return (
    <Picker
      {...sharedProps}
      inputRender={(p) => {
        return (
          <TimeInput
            {...p}
            value={value}
            onChange={onChange}
            placeholder={placeholder}
          />
        );
      }}
      locale={isChinese ? localeCN : localeUS}
      open={open}
      picker="time"
      value={value}
      onChange={handleChange}
      role="time-picker"
      onBlur={() => {
        setOpen(false);
      }}
      onFocus={() => {
        setOpen(true);
      }}
      onKeyDown={(e) => {
        if (e.code == "Enter") {
          setOpen(false);
        }
      }}
    />
  );
};

const DatePicker = ({
  pickerValue,
  onChange,
  selectedDate,
  isChinese = true,
}: DataPickerProps) => {
  const [startDate, endDate] = selectedDate;
  const sharedProps = {
    generateConfig,
    value: null,
    hideHeader: true,
    prefixCls,
    mode: "date",
    onChange,
  };
  const dateRender = (currentDate: DayType) => {
    const [start, end, date] = [startDate, endDate, currentDate].map((d) =>
      dateFormat(d)
    );
    const isSelected = dayjs(date).isSame(start) || dayjs(date).isSame(end);
    if (isSelected) {
      return (
        <div
          className={`${prefixCls}-cell-inner ${prefixCls}-cell-inner-selected`}
        >
          {currentDate.date()}
        </div>
      );
    }
    if (startDate && endDate) {
      const isBetween = dayjs(date).isBetween(start, end);
      return (
        <div
          className={classnames(`${prefixCls}-cell-inner`, {
            [`${prefixCls}-cell-inner-between`]: isBetween,
          })}
        >
          {currentDate.date()}
        </div>
      );
    }
    return (
      <div className={`${prefixCls}-cell-inner`}>{currentDate.date()}</div>
    );
  };
  return (
    <PickerPanel
      {...sharedProps}
      mode="date"
      locale={isChinese ? localeCN : localeUS}
      pickerValue={pickerValue}
      dateRender={dateRender}
    />
  );
};
export { TimePicker, DatePicker };
